<template>
  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>消费者管理</el-breadcrumb-item>
        <el-breadcrumb-item>消费次数</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row style="padding: 15px">
      <el-row class="main">
        <!--顶部-->
        <el-row style="padding-bottom: 10px;text-align: left">
            <el-select v-model="selectkey" placeholder="会员类型筛选" @change="getstart()">
              <el-option label="初级" :value="1"></el-option>
              <el-option label="中级" :value="2"></el-option>
              <el-option label="高级" :value="3"></el-option>
            </el-select>
        </el-row>
        <!--表格-->
        <el-table
          border
          align="left"
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="ordernum"
            label="订单号">
          </el-table-column>
          <el-table-column
            prop="price"
            label="	价格">
          </el-table-column>
          <el-table-column
            prop="integral"
            label="积分抵扣">
          </el-table-column>
          <el-table-column
            prop="duration"
            label="时长">
          </el-table-column>
          <el-table-column
            label="会员等级">
            <template slot-scope="scope">
              {{ vipLevelType[scope.row.vip_level] }}
            </template>
          </el-table-column>
          <el-table-column
            label="支付状态">
            <template slot-scope="scope">
              {{ scope.row.pay_state==1?'已支付':'未支付'}}
            </template>
          </el-table-column>
          <el-table-column
            label="支付类型">
            <template slot-scope="scope">
              {{scope.row.pay_type==1?'微信':'支付宝' }}
            </template>
          </el-table-column>
          <el-table-column
            label="	支付时间">
            <template slot-scope="scope">
              {{ toDate(scope.row.pay_time)}}
            </template>
          </el-table-column>
          <el-table-column
            label="下单时间">
            <template slot-scope="scope">
              {{ toDate(scope.row.addtime) }}
            </template>
          </el-table-column>
          <el-table-column
            label="使用开始时间">
            <template slot-scope="scope">
              {{ toDate(scope.row.start_time) }}
            </template>
          </el-table-column>
          <el-table-column
            label="		使用结束时间">
            <template slot-scope="scope">
              {{ toDate(scope.row.over_time) }}
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-row style="margin-top: 20px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" align="right">
            <el-pagination
              style="text-align: right"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataTotal">
            </el-pagination>
          </el-col>
        </el-row>
      </el-row>
    </el-row>
  </div>
</template>

<script>

  export default {
    name: "ClientCharge",
    activated() {
      if (!this.$store.state.login.in) {
        this.$router.push({name: "login", params: {userId: 123}})
      }
      this.getstart()
    },
    data() {
      return {
        tableData: [],
        pageSize: 10,
        currentPage: 1,
        dataTotal: 0,
        vipLevelType: {'1': '初级', '2': '中级', '3': '高级'},
        selectkey: '',
      }
    },
    methods: {
      //绑定表格数据，分页
      getstart() {
        let thi = this
        const prams = {
          page: thi.currentPage, /*当前页码*/
          pageSize: thi.pageSize, /*每页显示多少条数据*/
          user_id: thi.$route.params.data,
          key: thi.selectkey,
        }
        thi.mySelectAll('userChargeList', prams).then(function (value) {
          thi.tableData = value.data
          thi.dataTotal = value.Total
        })
      },
      //选择展示数量
      handleSizeChange(val) {
        this.pageSize = val
        this.getstart()
      },
      //分页
      handleCurrentChange(val) {
        this.currentPage = val
        this.getstart()
      },
    }
  }

</script>

<style scoped>
  .main {
    background-color: white;
    min-height: 500px;
    padding: 10px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
</style>

